<template>
<div class="cash cash_t_common cash_t_brief">
    <div class="tips tips-border">
      <div class="tips_tit pb">{{$t('cash.operation_tip')}}</div>
      <div class="tips_txt"> {{$t('cash.formula_total_amount')}} 


</div>
      <div class="tips_txt"> {{$t('cash.formula_merchant_settlement')}} 

</div>
      <div class="tips_txt">{{$t('cash.formula_actual_settlement')}}</div>
      <div class="tips_txt"> {{$t('cash.formula_platform_cut')}} 


</div>
      <div class="tips_txt">{{$t('cash.formula_platform_actual_cut')}}</div>
      <div class="tips_txt">{{$t('cash.formula_commission')}}</div>
      <div class="tips_txt"> {{$t('cash.formula_actual_commission')}} 

</div>
    </div>
    <div class="cash-header">
      <div>
        <span class="cash_t_title1">{{$t('cash.merchant_name_placeholder',{place1:dataModel.name})}}</span>
      </div>
    </div>
    <div class="cash-header">
      <div>
        <span class="cash_t_title">{{$t('cash.merchant_settlement')}}</span>
        <span> {{$t('cash.billing_period',{place1:searchForm.createTime[0],place2:searchForm.createTime[1]})}}

</span
        >
      </div>
    </div>
    <div class="cash-body">
      <div class="content">
        <p class="title">{{$t('cash.order_total_excl_discount')}}</p>
        <p class="money">{{dataModel.totalPrice}}</p>
      </div>
      <div class="content">
        <p class="title">{{$t('cash.freight_fee')}}</p>
        <p class="money">{{dataModel.expressMoney}}</p>
      </div>
      <div class="content">
        <p class="title">{{$t('cash.order_payment_total')}}</p>
        <p class="money">{{dataModel.orderMoney}}</p>
      </div>
      <div class="content">
        <p class="title">{{$t('cash.merchant_settlement_amount')}}</p>
        <p class="money">{{dataModel.supplierMoney}}</p>
      </div>
      <div class="content">
        <p class="title">{{$t('cash.merchant_refund_amount')}}</p>
        <p class="money">{{dataModel.refundSupplierMoney}}</p>
      </div>
      <div class="content">
        <p class="title">{{$t('cash.merchant_actual_settlement')}}</p>
        <p class="money">{{dataModel.realSupplierMoney}}</p>
      </div>
      <div class="content">
        <p class="title">{{$t('cash.platform_cut_amount')}}</p>
        <p class="money">{{dataModel.sysMoney}}</p>
      </div>
      <div class="content">
        <p class="title">{{$t('cash.platform_refund_amount')}}</p>
        <p class="money">{{dataModel.refundSysMoney}}</p>
      </div>
      <div class="content">
        <p class="title">{{$t('cash.platform_actual_cut_amount')}}</p>
        <p class="money">{{dataModel.realSysMoney}}</p>
      </div>
      <div class="content">
        <p class="title">{{$t('cash.distribution_commission_amount')}}</p>
        <p class="money">{{dataModel.agentMoney}}</p>
      </div>
      <div class="content">
        <p class="title">{{$t('cash.distribution_actual_commission')}}</p>
        <p class="money">{{dataModel.realAgentMoney}}</p>
      </div>
      <div class="content">
        <p class="title">{{$t('cash.product_refund')}}</p>
        <p class="money">{{dataModel.refundMoney}}</p>
      </div>
      <div class="content">
        <p class="title">{{$t('cash.merchant_coupon_deduction')}}</p>
        <p class="money">{{dataModel.couponMoney}}</p>
      </div>
      <div class="content">
        <p class="title">{{$t('cash.platform_coupon_deduction')}}</p>
        <p class="money">{{dataModel.couponMoneySys}}</p>
      </div>
      <div class="content">
        <p class="title">{{$t('cash.points_deduction')}}</p>
        <p class="money">{{dataModel.pointsMoney}}</p>
      </div>
    </div>
  </div>

  <div class="mt30">
    <!--表格-->
    <div class="product-content">
      <div class="table-wrap">
        <el-table
          size="small"
          :data="tableData"
          border
          style="width: 100%"
          v-loading="loading"
        >
          <el-table-column prop="orderNo" :label="$t('cash.order_number')"></el-table-column>
          <el-table-column prop="payMoney" :label="$t('cash.payment_total')"></el-table-column>
          <el-table-column
            prop="orderMoney"
            :label="$t('cash.order_amount_no_freight')"
          ></el-table-column>
          <el-table-column
            prop="realSupplierMoney"
            :label="$t('cash.merchant_actual_settlement_label')"
          ></el-table-column>
          <el-table-column
            prop="realSysMoney"
            :label="$t('cash.platform_actual_cut_label')"
          ></el-table-column>
          <el-table-column prop="agentMoney" :label="$t('cash.distribution_value')"></el-table-column>
          <el-table-column
            prop="refundMoney"
            :label="$t('cash.refund_amount')"
          ></el-table-column>
          <el-table-column
            prop="couponMoney"
            :label="$t('cash.merchant_coupon_deduction_label')"
          ></el-table-column>
          <el-table-column
            prop="couponMoneySys"
            :label="$t('cash.platform_coupon_label')"
          ></el-table-column>
          <el-table-column
            prop="pointsMoney"
            :label="$t('cash.points_deduction_label')"
          ></el-table-column>
          <el-table-column prop="createTime" :label="$t('cash.created_time')"></el-table-column>
        </el-table>
      </div>

      <!--分页-->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :current-page="curPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="totalDataNumber"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import SupplierApi from "@/api/supplier.js";
import { formatDate } from "@/utils/DateTime.js";
export default {
  components: {},
  data() {
    return {
      /*是否加载完成*/
      loading: true,
      /*列表数据*/
      tableData: [],
      dataModel: {},
      /*一页多少条*/
      pageSize: 20,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      /*横向表单数据模型*/
      formInline: {
        supplierId: null
      },
      searchForm: {
        createTime: []
      },
      supplierList: [],
      /*是否打开添加弹窗*/
      open_add: false,
      /*是否打开编辑弹窗*/
      open_edit: false,
      /*当前编辑的对象*/
      userModel: {},
      logoImgs: [],
      businessImgs: []
    };
  },
  created() {
    /*获取列表*/
    this.getParams();
  },
  methods: {
    next() {
      if (this.active++ > 4) this.active = 0;
    },
    /*获取参数*/
    getParams() {
      let self = this;
      // 取到路由带过来的参数
      const params = this.$route.query;
      self.searchForm.createTime[0] = params.startDate;
      self.searchForm.createTime[1] = params.endDate;
      SupplierApi.dataDetail(params, true).then(res => {
        self.loading = false;
        self.tableData = res.data.orderList.records;
        self.totalDataNumber = res.data.orderList.total;
        self.dataModel = res.data.tjData;
      }).catch(error => {
        self.loading = false;
      });
    },
    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.curPage = val;
      self.loading = true;
      self.getTableList();
    },
    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getTableList();
    },
    /*搜索查询*/
    onSubmit() {
      this.curPage = 1;
      this.getTableList();
    }
  }
};
</script>

<style>
.apply-container {
  padding: 50px 0;
}

.cash {
  background-color: #fff;
  font: 14px;
}
.tips-border {
  border: 1px solid #cacaca;
  padding: 15px;
  margin-bottom: 20px;
}
.tips_tit {
  font-size: 22px;
  margin-bottom: 10px;
}
.tips_txt {
  line-height: 25px;
  color: #666;
  font-size: 14px;
}
.cash_t_common {
  margin-top: 15px;
  margin-bottom: 0;
  box-shadow: initial;

  .cash_t_title {
    font-size: 15px;
    font-weight: 600;
  }
  .cash_t_title1 {
    font-size: 12px;
    font-weight: 600;
  }

  .cash-header {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.cash_t_brief .cash-header {
  border-bottom: 0;
  padding-bottom: 0;
}

.cash-header {
  position: relative;
  height: 42px;
  line-height: 42px;
  padding: 0 15px;
  border-bottom: 1px solid #f6f6f6;
  color: #333;
  border-radius: 2px 2px 0 0;
  font-size: 14px;
}

.cash_t_brief .cash_t_title {
  position: relative;
  padding-left: 10px;
}

.cash_t_brief .cash_t_title::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 14px;
  background-color: #3a8ee6;
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 5px;
  transform: translateY(-50%);
}

.cash_t_common .cash-body {
  padding: 20px;
}

.cash-body {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 0 !important;
  padding-right: 50px !important;
  padding-left: 50px !important;
  flex-wrap: wrap;
  position: relative;
  padding: 10px 15px;
  line-height: 24px;

  .content {
    width: 33.3%;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    justify-content: center;
  }

  .content {
    width: 33.3%;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    justify-content: center;
  }

  .money {
    font-size: 20px;
    color: #666;
    font-weight: bold;
    margin-top: 10px;
    max-width: 250px;
  }

  .subhead {
    font-size: 12px;
    margin-left: 3px;
    cursor: pointer;
  }
}

.ns-text-color {
  color: #3a8ee6;
}

.date_section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>

